<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

    <style type="text/css">
        .divLeft{
            float: left;
        }
    </style>

    <script type="text/javascript">

    $(function () {

        $(".time").datetimepicker({
            minView: "month",
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left"
        });

        //页面加载完毕后触发一个方法
        pageList(1, 5);

        $("#searchBtn").click(function () {

            var min = $.trim($("#search-minMoney").val());
            var max = $.trim($("#search-maxMoney").val());
            if (min != "" && max != "" &&((parseInt(min) > parseInt(max)))) {
                alert("请正确输入");
            }else {
                $("#hidden-name").val($.trim($("#search-name").val()));
                $("#hidden-owner").val($.trim($("#search-owner").val()));
                $("#hidden-minMoney").val(min);
                $("#hidden-maxMoney").val(max);
                pageList(1, 5);
            }

        })

        //为全选的复选框绑定事件，触发全选操作
        $("#qx").click(function () {

            $("input[name=xz]").prop("checked", this.checked);

        })

        $("#moneyBody").on("click", $("input[name=xz]"), function () {

            $("#qx").prop("checked", $("input[name=xz]").length == $("input[name=xz]:checked").length);

        })


    });

    function pageList(pageNo, pageSize) {

        //将全选的复选框的√干掉
        $("#qx").prop("checked", false);

        $.ajax({

            url: "workbench/customer/money.do",
            data: {

                "pageNo": pageNo,
                "pageSize": pageSize,

                "name": $.trim($("#search-name").val()),
                "owner": $.trim($("#search-owner").val()),
                "min": $.trim($("#search-minMoney").val()),
                "max": $.trim($("#search-maxMoney").val())

            },
            type: "get",
            dataType: "json",
            success: function (data) {

                var html = "";

                $.each(data.dataList, function (i, n) {

                    html += '<tr class="active">';
                    html += '<td><input type="checkbox" name="xz" value="' + n.id + '"/></td>';
                    html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/customer/detail.do?id=' + n.id + '\';">' + n.name + '</a></td>';
                    html += '<td>' + n.money + '</td>';
                    html += '<td>' + n.owner + '</td>';
                    html += '<td>' + n.website + '</td>';
                    html += '<td>' + n.description + '</td>';
                    html += '<td>' + n.address + '</td>';
                    html += '<td>' + n.priority + '</td>';
                    html += '</tr>';

                })

                $("#moneyBody").html(html);

                //计算总页数
                var totalPages = data.total % pageSize == 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                //数据处理完毕后，结合分页查询，对前端展现分页信息
                $("#moneyPage").bs_pagination({
                    currentPage: pageNo, // 页码
                    rowsPerPage: pageSize, // 每页显示的记录条数
                    maxRowsPerPage: 20, // 每页最多显示的记录条数
                    totalPages: totalPages, // 总页数
                    totalRows: data.total, // 总记录条数

                    visiblePageLinks: 3, // 显示几个卡片

                    showGoToPage: true,
                    showRowsPerPage: true,
                    showRowsInfo: true,
                    showRowsDefaultInfo: true,

                    //该回调函数时在，点击分页组件的时候触发的
                    onChangePage: function (event, data) {
                        pageList(data.currentPage, data.rowsPerPage);
                    }
                });


            }

        })

    }

</script>
</head>
<body>

<input type="hidden" id="hidden-owner"/>
<input type="hidden" id="hidden-name"/>
<input type="hidden" id="hidden-minMoney"/>
<input type="hidden" id="hidden-maxMoney"/>

<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>金额列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar " role="toolbar" style="height: 80px;">

            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">客户名称</div>
                        <input class="form-control" type="text" id="search-name">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="search-owner">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">金额范围</div>
                        <div class="divLeft"><input class="form-control" type="text" id="search-minMoney"><span>--</span></div>
                        <div class="divLeft"><input class="form-control" type="text" id="search-maxMoney"></div>
                    </div>
                </div>

                <button type="button" id="searchBtn" class="btn btn-default">查询</button>

            </form>

        </div>

        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="qx"/></td>
                    <td>客户名称</td>
                    <td>金额</td>
                    <td>所有者</td>
                    <td>客户网站</td>
                    <td>描述</td>
                    <td>客户地址</td>
                    <td>客户级别</td>
                    <td></td>
                </tr>
                </thead>
                <tbody id="moneyBody">

                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">

            <div id="moneyPage"></div>

        </div>
    </div>

</div>
</body>
</html>